<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码对比工具 - 开发者工具集合</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>开发者工具集合</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">代码格式化及压缩</a></li>
                <li><a href="datetime.html">日期时间戳转换</a></li>
                <li><a href="diff.html" class="active">代码对比工具</a></li>
                <li><a href="url.html">URL编解码</a></li>
                <li><a href="converter.html">代码转换工具</a></li>
            </ul>
        </nav>
        
        <main>
            <div class="tool-container">
                <div class="tool-header">
                    <h2>代码对比工具</h2>
                </div>
                
                <div class="diff-container">
                    <div class="diff-editors">
                        <div class="diff-editor">
                            <h3>原始代码</h3>
                            <textarea id="original-code" class="full-height" placeholder="请输入原始代码..."></textarea>
                        </div>
                        
                        <div class="diff-editor">
                            <h3>新代码</h3>
                            <textarea id="new-code" class="full-height" placeholder="请输入新代码..."></textarea>
                        </div>
                    </div>
                    
                    <div class="button-row">
                        <button id="compare-btn" class="primary-btn">对比代码</button>
                        <button id="clear-diff-btn" class="secondary-btn">清空</button>
                    </div>
                    
                    <div class="diff-result">
                        <h3>对比结果</h3>
                        <div id="diff-view" class="diff-view-container">
                            <div id="diff-original" class="diff-panel"></div>
                            <div id="diff-new" class="diff-panel"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>© 2025 开发者工具集合 | 本地工具，安全高效</p>
        </footer>
    </div>
    
    <script src="js/common.js"></script>
    <script src="js/diff.js"></script>
</body>
</html> 